<template>
    <div class="container">
      <form class="form" id="a-form" method="" action="">
        <h2 class="form_title title">用户登录</h2>
        <el-form ref="frmRef" label-position="center" label-width="100px" :model="stufrm" :rules="rules" class="form__span">
          <div class="form__input-container">
            <input v-model="stufrm.username"  type="text" class="form__input" id="username" placeholder="用户名" />
          </div>
          <div class="form__input-container">
            <input v-model="stufrm.password" type="password" class="form__input" id="password" placeholder="密码" />
          </div>
        </el-form>
          <el-form-item class="form-btns">
            <el-button class="form__button button submit" type="primary" @click="submitForm">登录</el-button>
            <el-button class="form__button button submit" type="default" @click="goToRegister">注册</el-button>
          </el-form-item>
  
      </form>
    </div>
  </template>
  
  <style scoped>
  *, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
  }
  
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 25px;
    background-color: #f2f2f2;
  }
  
  .form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  .form__icon {
    object-fit: contain;
    width: 30px;
    margin: 0 5px;
    opacity: 0.5;
    transition: 0.15s;
  }
  .form__icon:hover {
    opacity: 1;
    transition: 0.15s;
    cursor: pointer;
  }
  .form__input {
    width: 350px;
    height: 40px;
    margin: 4px 0;
    padding-left: 16px;
    font-size: 13px;
    letter-spacing: 0.15px;
    border: none;
    outline: none;
    color: #333333;
    font-family: "Montserrat", sans-serif;
    background-color: #ffffff;
    transition: 0.25s ease;
    border-radius: 10px;
    box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
  }
  .form__input:focus {
    box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
  }
  .form__span {
    margin-top: 30px;
    margin-bottom: 12px;
  
  }
  
  
  .title {
    font-size: 34px;
    font-weight: 700;
    line-height: 3;
    color: #333333;
  }
  
  .description {
    font-size: 14px;
    letter-spacing: 0.25px;
    text-align: center;
    line-height: 1.6;
  }
  
  .button {
    width: 180px;
    height: 50px;
    border-radius: 25px;
    margin-top: 30px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.15px;
    background-color: #4B70E2;
    color: #f9f9f9;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
    border: none;
    outline: none;
  }
  </style>
  <script>
  import { ElMessage } from 'element-plus';
  import axios from 'axios';
  
  export default {
    data() {
      return {
        stufrm: {
          username: '',
          password: ''
        },
        rules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        },
        dialogFormVisible: false,
        formLabelWidth: '100px',
        form: {
          username: '',
          password: '',
         
        }
      };
    },
    methods: {
     
  
  
  
  
      // 处理登录提交
      submitForm() {
        this.$refs.frmRef.validate((valid) => {
          if (valid) {
            axios.post('http://localhost:8080/login/authenticate', {
              username: this.stufrm.username,
              password: this.stufrm.password
            })
              .then(response => {
                if (response.data) {
                  this.username=response.data.username;
                  this.password=response.data.password;
                  localStorage.setItem("username",this.username);
                 localStorage.setItem('password', this.password);
                  ElMessage({
                    showClose: true,
                    message: '登录成功！',
                    type: 'success'
                  });
                  this.$router.push({ path: "/main" });
                } else {
                  ElMessage({
                    showClose: true,
                    message: '登录失败！',
                    type: 'warning'
                  });
                }
              })
              .catch(error => {
                console.error('登录失败：', error);
                ElMessage({
                  showClose: true,
                  message: '登录失败！',
                  type: 'error'
                });
              });
          }
        });
      },
      // 处理注册提交
      addUser() {
        this.form.user_sex = Number(this.form.user_sex);
        axios.post("http://localhost:8080/user/add", this.form)
          .then((res) => {
            if (res.data == 1) {
              this.form = {};
              this.dialogFormVisible = false;
              ElMessage({
                message: '注册成功！',
                type: 'success'
              });
            } else {
              ElMessage({
                message: '注册失败！',
                type: 'warning'
              });
            }
          })
          .catch((err) => {
            console.error('注册失败：', err);
            ElMessage({
              message: '注册失败！',
              type: 'error'
            });
          });
      },
      // 打开注册对话框
      btnAddDialog() {
        this.dialogFormVisible = true;
      }
    }
  };
  </script>